<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!-- 表单元素：采集用户信息，并提交信息到服务器
		 采集用户信息元素 input必须属性 type决定input呈现效果
		 重点掌握type中属性值     text     文本框
		                         password 密文文本框
								 submit   提交
								 button   按钮  【html4.0写法加value="按钮名称"】
								 reset    重置   结合表单元素
								 color    颜色
								 datetime-local 本地日期时间插件
								 date            年月日插件
								 time            时分插件
								 week            周插件
								 range           滑块元素
								 file            文件
								 raddio          单选框 结合name checked默认选项
								 checkbox        复选框          checked默认选项
								 image           图片按钮 结合src属性使用
								 hidden          隐藏 结合JS
		 -->
		 <form>
		<h1>拍控元素</h1>
		 账号:<input type="text"><br />
		 密码:<input type="password"><br />
		 <input type="submit">
		 <input type="button" value="自定义按钮">
		 <!-- html5.0写法 -->
		 <button>点击按钮</button>
		 <input type="reset"> <br>
		 <input type="color" />
		 <input type="datetime-local">
		 <input type="date">
		 <input type="time">
		 <input type="week">
		 <input type="range">
		 <input type="file" /><br />
		 男<input type="radio" name="sex" checked="checked"/>
		 女<input type="radio" name="sex"/>
		 <input type="checkbox" />红烧肉
		 <input type="checkbox" />麻辣烫
		 <input type="checkbox" />佛跳墙
		 <input type="image" src="img/2.jpg" />
		 <input type="hidden" />
		 <h1>下拉列表元素</h1>
		 <!-- 层级元素 快捷键:select>option-->
		 发车时间:<select>
		 	<option >00:00--24:00</option>
		 	<option >00.00--06.00</option>
		 	<option >06:00--12:00</option>
		 	<option >12:00--18:00</option>
		 	<option >18:00--24:00</option>
		 </select>
		 <!-- 超大文本框元素 cols列属性  rows行属性-->
		 <h1>超大文本框元素</h1>
		 建议:<textarea cols="50"rows="10"></textarea>
		 <!-- 细节元素   层叠元素 快捷键:details>summary+div-->
		 <h1>细节元素</h1>
		 <details>
		 	<summary>征婚启示</summary>
		 	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae et magnam molestias laudantium eligendi incidunt rem illum, optio vitae voluptatibus nobis voluptas, labore ipsa culpa voluptatem consectetur perferendis non exercitationem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci asperiores commodi ut expedita ullam! Quis vitae dolore ab fugit illo quod eaque blanditiis, saepe facilis quaerat libero aut incidunt. Hic! Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic odio repudiandae eveniet aperiam quibusdam, ipsam, itaque natus ab delectus eius minus non quae nihil eos asperiores, neque illo excepturi expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus voluptatem officiis impedit vel sit ex, laboriosam eveniet soluta in consectetur perspiciatis quia nemo a, ea corporis eaque nesciunt numquam ab!</div>
		 </details>
		 <h1>———>>求职申请<<———</h1>
		 <table cellspacing="0" cellpadding="0">
		 	<tr>
		 		<td> 用户名:<input type="text"><br /></td>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 	<tr>
		 		<tdrowspan="4">&nbsp;&nbsp;&nbsp;&nbsp;<br /></td>
		 		<td>密码:<input type="password"><br /></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 	<tr>
		 		<td>性别：男<input type="radio" name="sex" checked="checked"/>
		 女<input type="radio" name="sex"/>不透露<input type="radio" name="sex"/></td>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 	<tr>
		 		<td>头像:<input type="file" /><br /></td>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 	<tr>
		 		<td><input type="button" value="提交..."><input type="button" value="清除..."></td>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 	<tr>
		 		<td</td>
		 		<td><input type="checkbox" />不要公开我的信息</td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 </table>
		 <h1>新元素</h1>
		 <!-- 记号笔元素-->
		 周五<mark>放假了</mark>
		 <!-- 度量元素 value度量单位="默认:0min~1max"值   指定最大值和最小值
		      min属性 max属性
			  -->
		 电量:<meter value=".5" min="0" max="100"></meter>
		 
		 </form>
	</body>
</html>